<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar">
					<u-icon class="back" size="35" color="#9B9B9B" @click="$p.back()" name="arrow-left"></u-icon>
					<text>担保人</text>
					<text class="r_title" @click="$p.navto('/pages/index/securityorder')">我的订单</text>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<view class="topbox">
				<view class="t_box">
					<text>{{userinfo.type == 1?'5000':'0'}}</text>
					<text>保证金（水晶）</text>
					<view class="button" @click="show= true">缴纳5000水晶</view>
				</view>
				<view class="line"></view>
				<view class="t_box">
					<text>{{userinfo.frozen_green?userinfo.frozen_green:'0'}}</text>
					<text>冻结中（水晶）</text>
					<view class="button" @click="show2 = true">取出所有水晶</view>
				</view>
			</view>
			<view class="botbox">
				<view class="box">
					<h3>担保人介绍</h3>
					<p>1.作为担保人，你的ID会出现在水晶担保选项里,你可以从你担保的每一笔订单中获取奖励，用户通过你的担保进行赠送,赠送完成后，担保人可获得该笔交易50%的手续费奖励</p>
					<p>2.拥有酬劳的你，就要为该笔赠送负责，赠送方如果联系你后，并且把你选择为担保对象如果赠送方和被赠送方都确定没有问题后，你才能选择放行，如果被赠送方存在异常行为，你可以选择将这笔担保原路退回，同时你也将无法获得奖励。
					</p>
					<p>3.至于如何让玩家选择你而不是选择其他担保人，抢先眼熟、诚信、效率这些词可能会帮的上你。</p>
					<p>4.取出的保证金会冻结120小时，120小时没有人举报你，水晶会自动到账你的账户。</p>
				</view>
			</view>
		</view>

		<u-mask :show="show">
			<view class="warp">
				<view class="maskbox">
					<view class="title">
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
						<text>质押水晶</text>
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
					</view>
					<view class="whitebg">
						<view class="content">
							请确认是否质押5000水晶， <br> 成为担保人
						</view>
						<view class="maskbtn">
							<view class="button quit" @click="show = false">取消</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button confirm" @click="pledge">确定</u-button>
						</view>
					</view>
				</view>
				<image class="close" @click="show = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>

		<u-mask :show="show2">
			<view class="warp">
				<view class="maskbox">
					<view class="title">
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
						<text>取出水晶</text>
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
					</view>
					<view class="whitebg">
						<view class="content">
							请确认是否取出所有水晶
						</view>
						<view class="maskbtn">
							<view class="button quit" @click="show2 = false">取消</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button confirm" @click="outPledge">确定</u-button>
						</view>
					</view>
				</view>
				<image class="close"  @click="show2 = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				show:false,
				show2:false,
				userinfo:'',
			};
		},
		onLoad(){
			this.getUserInfo();
		},
		methods: {
			async getUserInfo(){
				let res = await this.$http.index.getUserInfo()
				this.userinfo = res.data
			},

			// 成为担保人
			async pledge(){
				let res = await this.$http.index.pledge()
				this.$u.toast(res.msg)
				if(res.code == 1) {
					this.getUserInfo();
					this.show = false
				}
			},

			//取出保证金
			async outPledge(){
				let res = await this.$http.index.outPledge()
				this.$u.toast(res.msg)
				if(res.code == 1) {
					this.getUserInfo();
					this.show2 = false
				}
			},
		},
	}
</script>

<style lang="less">

.zone {
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 50%);
	min-height: 100vh;
}
	.main {
		padding: 10px;
	}

	.topbox {
		background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
		border-radius: 5px;
		border: 1px solid #FEE1C3;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.t_box {
		width: 45%;
		display: flex;
		align-items: center;
		flex-direction: column;

		text:nth-child(1) {
			color: #239D4C;
			font-size: 18px;
			font-weight: 600;
		}

		text:nth-child(2) {
			color: #696969;
			font-size: 12px;
			margin: 10px 0;
		}

		view {
			width: 80%;
			height: 40px;
			background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
			border-radius: 5px;
			color: #000;
			font-weight: 600;
			font-size: 13px;
		}
	}

	.line {
		width: 1px;
		height: 27px;
		background: #fff;
	}


	.botbox {
		background: #FFFFFF;
		border: 1px solid #FEE1C3;
		border-radius: 10px;
		padding: 15px;
		margin-top: 10px;


		h3 {
			color: #343434;
			font-size: 14px;
			font-weight: normal;
		}

		p {
			color: #696969;
			font-size: 12px;
			margin: 10px 0;
		}
	}

.r_title {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #239D4C !important;
	font-size: 12px !important;
	text-decoration: underline !important;
}





// 弹窗

.maskbox {
	background: linear-gradient(178deg, #FEEBCB 0%, #F5F2F4 46%, #DDF1F6 64%, #FECCFF 100%);
	border-radius: 19px;
	padding: 15px;
	position: relative;

.title  {
	display: flex;
	align-items: center;
	justify-content: center;

	text {
		position: relative;
		color: #131314;
		font-size: 16px;
		margin: 0 10px;
		font-weight: 600;
		z-index: 99;
	}

	text::before {
		content: '';
		position: absolute;
		left: 15%;
		top: 0;
		width: 30px;
		height: 100%;
		border-radius: 20%;
		background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
		z-index: -1;
	}

	image {
		width: 12px;
	}
}

	
	.whitebg {
		background: #fff;
		border-radius: 12px;
		padding: 20px 10px;
		margin-top: 15px;
	}

	.content {
		color: #696969;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		line-height: 18px;
	}

	.maskbtn {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 15px;

		.button {
			width: 115px;
			height: 41px;
			font-weight: 600;
			font-size: 14px;
			margin: 0;
			background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
			border-radius: 5px;
			color: #343434;
		}
		.quit {
			opacity: 0.6;
		}
	}
}

.close {
		width: 30px;
		position: relative;
		left: calc(50% - 15px);
		margin-top: 20px;
	}

</style>